<template>
    <el-table :data="tableData" border style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa',
        fontWeight: 'bold',
        position: 'sticky',
        top: 0
    }">
        <el-table-column prop="pro_code" label="产品编号" width="180" />
        <el-table-column prop="pro_name" label="产品名称" />
        <el-table-column prop="pro_brand" label="品牌" />
        <el-table-column prop="pro_model" label="规格型号" />
        <el-table-column prop="unitmeas_id" label="单位">
            <template #default="scope">
                <span>{{ measureValue(scope.row.unitmeas_id) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="po_number" label="采购数量" />
        <el-table-column prop="details_monovalent" label="采购单价" />
        <el-table-column prop="details_storage" label="已入库数量" />
        <el-table-column prop="details_storage" label="未入库数量">
            <template #default="scope">
                <span>{{  wrksjValue(scope.row) }}</span>
            </template>
        </el-table-column>
    </el-table>
    <div style="height: 40px; line-height: 40px;">
        <div style="display: inline-block; float: left;">合计</div>
        <div style="display: inline-block; float:right">采购总数量：{{ sale_total_qty }} &nbsp;&nbsp;&nbsp;产品成本总额：{{
                Number(sale_total_price).toFixed(2) }}
        </div>
    </div>
</template>

<script>
import { ref, reactive, watch, onMounted } from 'vue'
import axios from 'axios'
export default {
    props: {
        detailsData: {
            type: Array,
            default: () => []
        },
        orderCode: String
    },
    setup(props) {
        const tableData = ref()
        const measureOptios = ref([])
        const sale_total_qty = ref(0)//记录销售数量
        const sale_total_price = ref(0)//记录采购金额
        const cost_total_proce = ref(0)//记录成本金额
        // const num = ref(0)//记录采购数量

        onMounted(() => {
            getMeasure()
        })

        watch(() => props.detailsData, (newVal) => {
            tableData.value = JSON.parse(JSON.stringify(newVal))
            newVal.forEach(row => {
                row.details_storage = Number((row.po_number || 0) * (row.details_monovalent || 0)).toFixed(2);
                row.pro_total_cost = Number((row.po_number || 0) * (row.pro_cost_price || 0)).toFixed(2);

                sale_total_qty.value += Number(row.po_number)
                cost_total_proce.value += Number(row.details_monovalent)
                sale_total_price.value = Number(sale_total_qty.value) * Number(cost_total_proce.value).toFixed(2);
                // num = Number(row.po_number) - Number(row.details_storage)
            });
        }, { immediate: true })

        //查询计量单位
        function getMeasure() {
            axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
                params: {
                    dict_type: "db_measure"
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                measureOptios.value = result.data
                console.log(measureOptios)
            }).catch((err) => {
                console.info(err)
            });
        }

        //根据计量单位id返回计量单位名称
        function measureValue(row) {
            if (!row) return "无";
            const parentDept = measureOptios.value.find((sex) => sex.dict_value == row);
            return parentDept ? parentDept.dict_label : "无";
        }

        function wrksjValue(row){
            const wrksj = Number(row.po_number) - Number(row.details_storage)
            return Number(wrksj)
        }

        return {
            tableData, measureOptios, measureValue,sale_total_price,cost_total_proce,sale_total_qty,wrksjValue
        }
    }
}
</script>

<style scoped></style>